<header class="page-header clearfix">
    <h4><i class="fa fa-exchange"></i>告警规则</h4>
    <div class="toolbox" permission="perm_alert_rule_add">
        <a type="button" ng-click="list.addRules()">
            <i class="fa fa-plus"></i>新增告警规则
        </a>
    </div>
    <ol class="breadcrumb">
        <li><a>告警</a></li>
        <li class="active">告警规则</li>
    </ol>
</header>
<section>
    <ui-panel class="panel-list">
        <form class="form-inline form-search">
            <div class="form-group">
                <select ng-model="list.clusterInst" class="form-control"
                        ng-options="opt as opt.clusterName for opt in ::list.clusters" ng-change="list.getList()">
                </select>
            </div>
        </form>


        <table class="table table-hover alarm-table">
            <thead>
                <tr>
                    <th width="20%">告警名称</th>
                    <th width="40%">告警规则</th>
                    <th width="40%">告警对象</th>
                </tr>
            </thead>
            <tbody>


            <tr ng-repeat="elem in list.table" ng-show="!list.loading">
                <td class="row-head" ng-switch="elem.deleting">
                    <a ui-sref="alarm-k8s-pre-detail({id: elem.id})">{{::elem.alertName}}</a>
                    <div class="toolbox" ng-switch-default permission="perm_alert_rule_delete">
                        <a ng-click="list.deleteAlarm(elem)"  title="删除"><i class="fa fa-times fa-lg"></i></a>
                    </div>
                    <div class="toolbox tb-loading" ng-switch-when="true"><div class="loading-sm"/></div>
                </td>
                <td>
                    <p class="margin-bottom-0" ng-attr-title="{{elem.ruleItem.join(',')}}">
                        {{elem.ruleItem.join(', ')}}
                    </p>
                </td>
                <td>
                    <p ng-if="elem.service.length == 0" class="margin-bottom-0">全部服务</p>
                    <p ng-if="elem.service.length != 0" class="margin-bottom-0" ng-attr-title="{{elem.service.join(',')}}">
                        {{elem.service.join(', ')}}
                    </p>
                </td>
            </tr>

            </tbody>
        </table>

        <!--Loading-->
        <div class="loading" ng-show="list.loading"></div>
        <div ng-show="list.data.totalItems==0 && !list.loading" class="no-data margin-top-10 text-center">暂无数据</div>

        <div ng-show="list.page.totalItems!=0" class="pagination-group">
            <ui-pagination-info items-per-page="10" items-per-page-select="false"
                                total-items="list.page.totalItems"
                                current-page="list.page.currentPage"></ui-pagination-info>
            <button type="button" ng-click="list.getList()" class="btn btn-default btn-refresh"><i
                    class="fa fa-refresh"></i></button>
            <ui-pagination items-per-page="10" total-items="list.page.totalItems"
                           ng-model="list.page.currentPage" ng-change="list.getList()"></ui-pagination>
        </div>
    </ui-panel>
</section>
